<template>

	<view class="page">
		<view class="flex benben-position-layout flex flex-wrap align-center couponCenter_flex_0_hiae"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
			<view class='flex flex-wrap align-center justify-between flex-sub couponCenter_fd0_0_hiae'>
				<view class='flex flex-wrap align-center couponCenter_fd0_0_c0_hiae' @tap.stop="handleJumpDiy"
					data-type="back" data-url="1">
					<text class='fu-iconfont2  couponCenter_fd0_0_c0_c0_hiae'>&#xe794;</text>
				</view>
				<!-- <text class='couponCenter_fd0_0_c1_hiae'>{{$t('领券中心')}}</text> -->
				<text class='couponCenter_fd0_0_c1_hiae'>{{$t('我的优惠券')}}</text>
				<view class='flex flex-wrap align-center couponCenter_fd0_0_c0_hiae'>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<view class="flex flex-direction flex-wrap align-stretch benben-position-layout flex myCoupon_flex_1"
			:style="{top:(88+StatusBarRpx)+'rpx', }">
			<view class='flex flex-wrap align-center myCoupon_fd1_1'>
				<view class='flex flex-wrap align-center myCoupon_fd1_1_c0'>
					<benben-input class='flex-sub myCoupon_fd1_1_c0_c0' type="text" :placeholder="`请输入兑换码`"
						confirm-type="done" :maxlength="50" placeholder-style="color:#999;font-size:28rpx"
						v-model="coupon_code" />
					<button class='myCoupon_fd1_1_c0_c1' @tap="getExchangeFunc()">兑换</button>
				</view>
			</view>

		</view>
		<view :style="{height: '120rpx'}"></view>
		<!---flex布局flex布局开始-->
		<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout couponCenter_flex_1_hiae">
			<template v-for='(item,key0) in couponList'>
				<view class='flex flex-wrap align-center couponCenter_fd1_0_hiae' :key='key0'>
					<view class='flex flex-direction flex-wrap align-center justify-center couponCenter_fd1_0_c0_hiae'>
						<view class='flex align-center'>
							<text class='couponCenter_fd1_0_c0_c0_c0_hiae'>￥</text>
							<text class='couponCenter_fd1_0_c0_c0_c1_hiae'>{{item.money}}</text>
						</view>
						<text class='couponCenter_fd1_0_c0_c1_hiae'>{{item.min_money_name}}</text>
					</view>
					<view
						class='flex flex-direction flex-wrap align-stretch justify-center flex-sub couponCenter_fd1_0_c1_hiae'>
						<text class='couponCenter_fd1_0_c1_c0_hiae'>{{item.name}}</text>
						<text class='couponCenter_fd1_0_c1_c1_hiae'>{{item.content}}</text>
						<view class='flex flex-wrap align-center couponCenter_fd1_0_c1_c2_hiae'>
							<text class='couponCenter_fd1_0_c1_c2_c0_hiae'>{{$t('有效期至：')}}</text>
							<text class='couponCenter_fd1_0_c1_c2_c0_hiae'>{{item.end_time}}</text>
						</view>
						<view class='flex flex-wrap align-center justify-end couponCenter_fd1_0_c1_c3_hiae'>
							<button class='couponCenter_fd1_0_c1_c3_c0_hiae' open-type="share"
								v-if=" appSystemIdentification=='Wechat'">{{$t('分享')}}</button>
							<button class='couponCenter_fd1_0_c1_c3_c0_hiae' v-if=" appSystemIdentification!='Wechat'"
								@tap.stop="shareJump(item)">{{$t('分享')}}</button>
							<button class='couponCenter_fd1_0_c1_c3_c1_hiae' @tap="postCouponFunc(item.id)"
								v-if="item.status != '1'">{{$t('领取')}}</button>
							<button class='couponCenter_fd1_0_c1_c3_c1_hiae' v-if="item.status == '1'"
								@tap.stop="handleJumpDiy" data-type="switchTab"
								:data-url="`/pages/tabBar/index/index`">{{$t('去使用')}}</button>
						</view>
					</view>
				</view>
			</template>
			<fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
				:listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
		</view>
		<!---flex布局flex布局结束-->
		<!---分享flex布局开始-->
		<benben-popup v-model="popupShow1728198922137" :mask="true" :mask-close-able="true" mode='bottom'>
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout">
				<view class='flex flex-direction flex-wrap align-stretch serviceDetails_fd3_0078963'>
					<view class='flex flex-wrap align-center justify-between serviceDetails_fd3_0_c0078963'>
						<view class='flex flex-wrap align-center serviceDetails_fd3_0_c0_c0078963'>
						</view>
						<text class='serviceDetails_fd3_0_c0_c1078963'>分享到</text>
						<view class='flex flex-wrap align-center' @tap.stop="popupShow1728198922137 = false">
							<image class='serviceDetails_fd3_0_c0_c2_c0078963' mode="aspectFit"
								:src='STATIC_URL+"66.png"'></image>
						</view>
					</view>
					<view class='flex flex-wrap align-center justify-around serviceDetails_fd3_0_c1078963'>
						<view class='flex flex-direction flex-wrap align-center serviceDetails_fd3_0_c1_c0078963'
							@tap.stop="clickShearFunc(1)">
							<button class='serviceDetails_fd3_0_c1_c0_c0078963' open-type="share"></button>
							<image class='serviceDetails_fd3_0_c1_c0_c1078963' mode="aspectFit"
								:src='STATIC_URL+"229.png"'></image>
							<text class='serviceDetails_fd3_0_c1_c0_c2078963'>微信好友</text>
						</view>
						<view class='flex flex-direction flex-wrap align-center' @tap.stop="clickShearFunc(2)">
							<image class='serviceDetails_fd3_0_c1_c0_c1078963' mode="aspectFit"
								:src='STATIC_URL+"230.png"'></image>
							<text class='serviceDetails_fd3_0_c1_c0_c2078963'>朋友圈</text>
						</view>
					</view>
				</view>
			</view>
		</benben-popup>
		<!---分享flex布局结束-->
	</view>
</template>
<script>
	import pagingList from '@/common/mixin/paging_list.js';
	import {
		validate
	} from '@/common/utils/validate.js'

	export default {
		components: {},
		mixins: [pagingList],

		data() {
			return {
				"tabsInfofd1_0": {
					lineleft: '',
					lineWidth: '',
					moveX: 0,
					scrollX: 0,
					PageScrollX: 0
				},
				"headData": {
					"available_num": "",
					"noavailable_num": ""
				},
				"type": "2",
				"popupShow1728198922137": false,
				"minixPagingListsApi": "",
				"pageingListApiMethod": "",
				"aaa": {},
				"allowOnloadGetList": false,
				"switchData": {},
				"coupon_code": "",
				"couponList": []
			};
		},
		computed: {
			/**
			 * @returns 
			 * Android       安卓
			 * IOS       苹果
			 * Web       H5 或 pc
			 * Wechat       微信小程序
			 * Alipay       支付宝小程序
			 * Baidu       百度小程序
			 * ByteBounce       抖音小程序
			 * 360       360小程序
			 * FastApp       快应用
			 */
			appSystemIdentification() {
				return this.$store.state.appSystemIdentification
			},
			isLogin() {
				return this.$store.state.token == '' ? false : true;
			}
		},
		watch: {},
		onLoad(options) {
			this.getpu3942c7d93a37Func()
			this.getSwitchFunc()
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {
			this.getpu3942c7d93a37Func()
		},
		onShareAppMessage() {
			return {
				title: '高整无忧-数字家政平台',
				path: `/pages/index/couponCenter/couponCenter`,
				imageUrl: this.switchData.share_image,
			}
		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			//提交兑换码
			async getExchangeFunc() {
				if (!validate(this.coupon_code, 'require')) {
					this.$message.info('兑换码不能为空');
					return false;
				}
				//请求方法
				//数据验证

				let data64dedc85c1e82 = await this.$api.dbPost(global.apiUrls.post64dedc85c1e82, {
					coupon_code: this.coupon_code,
					// coupon_type: this.coupon_type
				});
				if (!data64dedc85c1e82) return
				if (data64dedc85c1e82.data.code != 1) {
					this.$message.info(data64dedc85c1e82.data.msg);
					return
				} else {
					this.$message.info(data64dedc85c1e82.data.msg);
				}
				this.getpu3942c7d93a37Func()
				// this.getCouponFunc()
				// this.getNumFunc()
			},
			//点击分享
			async clickShearFunc(type) {
				if (type == '1') {
					console.log(this.aaa.id);
					await this.syncUniApi('share', {
						'provider': 'weixin',
						'scene': 'WXSceneSession',
						'type': 0,
						'title': this.aaa.name,
						'href': this.switchData.share_url +
							'shareconpun/#/pages/index/Sharecoupons/Sharecoupons?id=' + this.aaa.id,
						'summary': this.aaa.content,
						'imageUrl': this.switchData.share_image
					})
					this.popupShow1728198922137 = false
				} else if (type == '2') {
					await this.syncUniApi('share', {
						'provider': 'weixin',
						'scene': 'WXSceneTimeline',
						'type': 0,
						'title': this.aaa.name,
						'href': this.switchData.share_url +
							'shareconpun/#/pages/index/Sharecoupons/Sharecoupons?id=' + this.aaa.id,
						'summary': this.aaa.content,
						'imageUrl': this.switchData.share_image
					})
					this.popupShow1728198922137 = false
				}
			},
			shareJump(item) {
				if (this.isLogin == false) {
					this.$message.info('请先登录再进行分享')
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/tabBar/login/login'
						})
					}, 500)
				} else {
					this.aaa = item
					console.log(this.aaa);
					this.popupShow1728198922137 = true
				}
			},
			//获取分享图片
			async getSwitchFunc() {
				//请求方法
				//数据验证

				let dataswitchData = await this.$api.get(global.apiUrls.post6838171e4f953, {

				});

				if (dataswitchData.data.code != 1) {
					this.$message.info(dataswitchData.data.msg);
					return
				}
				let infoswitchData = dataswitchData.data;
				this.switchData = infoswitchData.data
			},
			//提交领取优惠券
			async postCouponFunc(couponID) {
				//请求方法
				//数据验证
				let data64196d6a86d0d = await this.$api.dbPost(global.apiUrls.post64196d6a86d0d, {
					id: couponID
				});
				if (!data64196d6a86d0d) return
				if (data64196d6a86d0d.data.code != 1) {
					this.$message.info(data64196d6a86d0d.data.msg);
					return
				}
				this.$message.info('领取成功');
				this.getpu3942c7d93a37Func()
			},
			//获取优惠券列表
			getpu3942c7d93a37Func() {
				this.minixPagingListsApi = global.apiUrls.post68351401c2bd3;
				this.pageingListApiMethod = 'get';
				this.allowOnloadGetList = false;
				this.pagingListPostDataContent = {
					method: '10'
				}
				this.listData = [];
				this.couponList = this.listData;
				this.pagingListToggle();

			},
			pagingListPostData() {
				return this.pagingListPostDataContent
			}
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: transparent;
		background-size: 100% auto;

		.couponCenter_flex_1_hiae {
			padding: 0rpx 32rpx 0rpx 32rpx;

			.couponCenter_fd1_0_hiae {
				background: url(/static/images/YHBJ.png) no-repeat;
				background-size: 100% 100% !important;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin: 0rpx 0rpx 20rpx 0rpx;
				box-shadow: 4rpx 8rpx 12rpx rgba(51, 51, 51, 0.06);

				.couponCenter_fd1_0_c0_hiae {
					width: 190rpx;

					.couponCenter_fd1_0_c0_c0_c0_hiae {
						color: #FFFFFF;
						font-size: 24rpx;
						font-weight: 700;
						line-height: 32rpx;
						margin: 13rpx 0rpx 0rpx 0rpx;
					}

					.couponCenter_fd1_0_c0_c0_c1_hiae {
						color: #FFFFFF;
						font-size: 42rpx;
						font-weight: 700;
						line-height: 67rpx;
						-webkit-line-clamp: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
					}

					.couponCenter_fd1_0_c0_c1_hiae {
						color: #FFFFFF;
						font-size: 24rpx;
						font-weight: 700;
						line-height: 33rpx;
						margin: 7rpx 0rpx 0rpx 0rpx;
						-webkit-line-clamp: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
					}
				}

				.couponCenter_fd1_0_c1_hiae {
					padding: 0rpx 32rpx 0rpx 32rpx;

					.couponCenter_fd1_0_c1_c0_hiae {
						color: #333333;
						font-size: 28rpx;
						font-weight: 700;
						-webkit-line-clamp: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						line-height: 40rpx;
						margin: 16rpx 0rpx 0rpx 0rpx;
					}

					.couponCenter_fd1_0_c1_c1_hiae {
						color: #999999;
						font-size: 24rpx;
						font-weight: 400;
						line-height: 33rpx;
						margin: 8rpx 0rpx 8rpx 0rpx;
						-webkit-line-clamp: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
					}

					.couponCenter_fd1_0_c1_c2_hiae {
						color: #909093;
						font-size: 22rpx;
						line-height: 30rpx;
						font-weight: 400;
						margin: 0rpx 0rpx 8rpx 0rpx;
					}

					.couponCenter_fd1_0_c1_c3_hiae {
						margin: 0rpx 0rpx 16rpx 0rpx;

						.couponCenter_fd1_0_c1_c3_c0_hiae {
							border-radius: 33rpx 33rpx 33rpx 33rpx;
							width: 95rpx;
							line-height: 45rpx;
							font-size: 22rpx;
							background: rgba(255, 87, 85, 1);
							color: #fff;
							margin: 0rpx 16rpx 0rpx 0rpx;
						}

						.couponCenter_fd1_0_c1_c3_c1_hiae {
							border-radius: 33rpx 33rpx 33rpx 33rpx;
							width: 95rpx;
							line-height: 45rpx;
							font-size: 22rpx;
							background: rgba(255, 87, 85, 1);
							color: #fff;
						}
					}
				}
			}
		}

		.couponCenter_fd1_0_c1_c2_c0_hiae {
			color: #666666;
			font-size: 22rpx;
			font-weight: 400;
			line-height: 30rpx;
		}

		.couponCenter_flex_0_hiae {
			width: 750rpx;
			height: 88rpx;
			overflow: hidden;
			z-index: 10;
			top: 0rpx;
			background-size: 100% auto;
			background: #fff;

			.couponCenter_fd0_0_hiae {
				padding: 0rpx 32rpx 0rpx 32rpx;
				height: 88rpx;

				.couponCenter_fd0_0_c1_hiae {
					font-size: 36rpx;
					font-weight: 500;
					color: #333;
				}
			}
		}

		.couponCenter_fd0_0_c0_hiae {
			width: 120rpx;
			height: 88rpx;

			.couponCenter_fd0_0_c0_c0_hiae {
				font-size: 32rpx;
				color: #333;
			}
		}
	}

	//分享弹窗
	.serviceDetails_fd3_0_c1_c0_c2078963 {
		font-size: 24rpx;
		font-weight: 400;
		color: #333;
	}

	.serviceDetails_fd3_0_c1_c0_c1078963 {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		margin: 0rpx 0rpx 16rpx 0rpx;
	}

	.serviceDetails_fd3_0_c1_c0_c0078963 {
		background: transparent;
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 10;
	}

	.serviceDetails_fd3_0_c1_c0078963 {
		position: relative;
	}

	.serviceDetails_fd3_0_c1078963 {
		padding: 0rpx 0rpx 58rpx 0rpx;
	}

	.serviceDetails_fd3_0_c0_c2_c0078963 {
		width: 40rpx;
		height: 40rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.serviceDetails_fd3_0_c0_c1078963 {
		font-size: 32rpx;
		font-weight: 700;
		color: #333;
		margin: 0rpx 16rpx 0rpx 16rpx;
	}

	.serviceDetails_fd3_0_c0_c0078963 {
		width: 40rpx;
		height: 40rpx;
	}

	.serviceDetails_fd3_0_c0078963 {
		margin: 40rpx 0rpx 40rpx 0rpx;
	}

	.serviceDetails_fd3_0078963 {
		background: #fff;
		background-size: 100% auto !important;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.couponCenter_fd1_0_c1_c1_hiae001122 {
		color: #999999;
		font-size: 22rpx;
		font-weight: 400;
		line-height: 33rpx;
		margin: 0rpx auto 0rpx 0rpx;
		width: 215rpx;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	//优惠券样式
	.myCoupon_flex_1 {
		background: rgba(248, 248, 248, 1);
		width: 750rpx;
		height: 120rpx;
		overflow: hidden;
		z-index: 10;
		top: 88rpx;
		background-size: 100% auto;
		// padding: 24rpx 0rpx 0rpx 0rpx;
		// margin: 24rpx 0rpx 0rpx 0rpx;
	}

	::v-deep .myCoupon_benbenTabsfd1_0 {
		width: 750rpx;
		height: 91rpx;
		white-space: nowrap;
		text-align: center;
		font-size: 32rpx;
		font-weight: 400;
		color: #666666;
	}

	.checkTitlefd1_0 {
		font-weight: 700 !important;
		font-size: 32rpx !important;
		color: #333 !important;
		background-color: rgba(255, 255, 255, 0) !important;
	}

	.myCoupon_linefd1_0 {
		background: var(--benbenbgColor2);
		width: 40rpx;
		height: 6rpx;
		top: 80rpx;
		background-size: 100% auto !important;
	}

	//
	.myCoupon_fd1_1_c0_c1 {
		background: rgba(227, 29, 26, 1);
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		width: 160rpx;
		line-height: 60rpx;
		font-size: 24rpx;
		color: #fff;
		height: 62rpx;
		margin-right: 2rpx;
	}

	.myCoupon_fd1_1_c0_c0 {
		font-size: 28rpx;
		font-weight: 400;
		color: #333;
		margin: 8rpx 24rpx 0rpx 24rpx;
	}

	.myCoupon_fd1_1_c0 {
		border: 1px solid rgba(227, 29, 26, 1);
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		width: 686rpx;
		height: 72rpx;
		margin: 0rpx 32rpx 0rpx 32rpx;
	}

	.myCoupon_fd1_1 {
		margin: 24rpx 0rpx 0rpx 0rpx;
	}
</style>